<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <div class="flex w-1/3 p-6 shadow-lg rounded-lg flex-col bg-white">
      <el-upload
        class="w-full flex flex-col items-center"
        ref="upload"
        :headers="headers"
        :auto-upload="false"
        drag
        :action="url"
        :limit="1"
        :on-success="uploadSuccess"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 xlsx/xls 文件，且不超过 500kb
          </div>
          <el-button @click="submitUpload" type="primary" class="mt-4"
            >上传</el-button
          >
        </template>
      </el-upload>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
import { ReturnDTO } from "/@/api/type";
import { BASE_URL } from "/@/utils/http/core";
import { errorMessage, successMessage } from "/@/utils/message";
import { storageSession } from "/@/utils/storage";

export default {
  setup() {
    const headers = reactive({
      token: storageSession.getItem("info")["accessToken"]
    });

    const upload = ref(null);
    const url = ref("");
    url.value = BASE_URL + "/user/staff/addList";

    const submitUpload = () => {
      upload.value.submit();
    };
    const uploadSuccess = (res: ReturnDTO) => {
      if (res.code === 1) {
        successMessage("批量创建用户成功");
      } else {
        errorMessage(res.message);
      }
      upload.value.clearFiles();
    };

    return {
      headers,
      upload,
      submitUpload,
      url,
      uploadSuccess
    };
  }
};
</script>

<style scoped></style>
